<template>
    <div class="contents">
      <div class="content">
        <table>
          <thead id="thead">
          <tr>
            <th>文章标题</th>
            <th>来源</th>
            <th>作者</th>
            <th>发布时间</th>
            <th>操作</th>
          </tr>
          </thead>
          <tbody id="tbody">
          <tr v-for="item in medicineDietList" :key="item.itemid">
            <td>{{item.hotspotTitle}}</td>
            <td>{{item.hotspotSource}}</td>
            <td>{{item.hotspotAuthor}}</td>
            <td>{{item.itemcreateat}}</td>
            <td>
              <a href="javascript:void(0)">查看</a>
              <a href="javascript:void(0)">提交</a>
              <a href="javascript:void(0)" id="delete">删除</a>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
      <div class="index">
      <span>
        <button>&lt;</button>
        <button>1</button>
        <button>2</button>
        <button>3</button>
        <button>4</button>
        <button>5</button>
        <button>6</button>
        <button>7</button>
        <button>8</button>
        <button>9</button>
        <button>&gt;</button>&emsp;
        <select id="size" @click="getPageSize">
          <option value="5">5条/页</option>
          <option value="10">10条/页</option>
          <option value="15">15条/页</option>
          <option value="20">20条/页</option>
        </select>&emsp;
        跳至 <input type="text" > 页
      </span>
      </div>
    </div>
</template>

<script>
  import $ from 'jquery';
    export default {
        name: "Contents",
        data(){
            return{
                medicineDietList: [],
                currentPage: 1,
                size: 5,
                baseApi: 'http://localhost:8071/getMedicineDiet'
            }
        },
        methods:{
            getMedicineDietList() {
                var data={current:this.currentPage, size:this.size, dataType: '2'};
                this.$http.get(this.baseApi,{params:data}).then((res) => {
                    // console.log(res.data);
                    this.medicineDietList = res.data.list;
                }, (err) => {
                    console.log(err);
                });
            },
            getPageSize(){   //每页大小选择
                var option=$("#size option:selected");
                // console.log(option.val());
                if(option.val()!=this.size){
                    this.size=option.val();
                    this.getMedicineDietList();
                }
            }
        },
        mounted() {
            this.getMedicineDietList();
        }
    }
</script>

<style scoped>
  .content {
    /*background-color: darkgray;*/
    width: 100%;
    height: auto;
    min-height: 470px;
  }

  .content table {
    width: 100%;
    font-size: 14px;
    border-collapse: collapse; /*去除所有缝隙*/
    text-align: center; /*让表格中的内容居中显示*/
    word-break: break-all;
    table-layout: fixed;
  }

  table, th, td {
    border: none; /*去除所有边框*/
  }

  #thead {
    height: 50px;
    background-color: #775637;
    color: white;
  }

  #tbody tr {
    height: 80px;
  }

  #tbody{
    font-size: 13px;

  }
  td a {
    text-decoration: none;
    color: #de9566;
  }

  #delete {
    color: red;
  }

  .index {
    width: 100%;
    /*background-color: darkgrey;*/
    text-align: right; /* 让div下内容靠右显示 */
    margin-top: 15px;
    margin-bottom: 15px;
  }

  .index button {
    width: 3%;
    height: 25px;
    border: 1px solid darkgrey;
    border-radius: 10%;
    background-color: white;
  }

  #size {
    width: 6%;
    height: 26px;
    border: 1px solid darkgrey;
    color: darkgrey;
    border-radius: 5%;
  }

  .index input {
    width: 2%;
    height: 25px;
    border: 1px solid darkgrey;
    border-radius: 10%;
    padding-left: 10px;
    padding-right: 10px;
  }
</style>
